<template>
  <a-layout>
    <a-layout-header class="header">
      <Header />
    </a-layout-header>
    <a-layout class="conent">
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible class="sider">
        <NavMenu :menuItems="menuItems" />
      </a-layout-sider>
      <a-layout-content>
        <!-- TODO 面包屑 -->
        <a-breadcrumb style="background: #f6f7f9; line-height: 32px" separator="/">
          <a-breadcrumb-item>
            <a-icon>
              <import-outlined />
            </a-icon>
          </a-breadcrumb-item>
          <a-breadcrumb-item v-for="item in breadList" :key="item.name">
            <router-link :to="{ path: item.path === '' ? '/' : item.path }">
              {{ item.name }}
            </router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="{ marginLeft: '24px', background: '#fff' }">
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
  import Header from '@/components/MyHeader/index.vue';
  import NavMenu from '@/components/SideMenu/index.vue';
  import { menuItems, getMenuIcon } from './menu';
  import { RouteLocationMatched, useRoute } from 'vue-router';
  const collapsed = ref<boolean>(false);
  const route = useRoute();
  const breadList: Ref<RouteLocationMatched[]> = ref([]);
  const nameIcon: Ref<any> = ref('');
  const getBreadcrumb = () => {
    breadList.value = [];
    nameIcon.value = getMenuIcon(route.name);
    route.matched.forEach((item) => {
      breadList.value.push(item);
    });
  };
  watch(() => route.path, getBreadcrumb);
  onBeforeMount(() => {
    getBreadcrumb();
  });
</script>
<style lang="less" scoped>
  .header {
    height: 64px;
    background: #ffffff;
    box-shadow: 0px 1px 4px rgba(0, 21, 41, 0.12);
    margin-bottom: 1px;
    padding-left: 25px;
  }
  .sider {
    width: 256px !important;
    background: #fff;
    padding-top: 22px;
  }
  .conent {
    height: calc(100vh - 0.65rem);
  }
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .trigger:hover {
    color: #1890ff;
  }
</style>
